<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span @click="fn.back()" class="mui-action-back"
          ><img class="back-btn" src="../../../../static/images/back.png"
        /></span>
        <div class="header-search flex-center">
          {{ signSatus == "1" ? "参会人员" : "缺席人员" }}
        </div>
      </div>
    </header>

    <div class="mui-page-content record-contents">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll mui-scroll-wrapper">
          <div class="work-message-lists mui-scroll-wrapper">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="mui-table-view-cell work-message-item"
                    v-for="(data, index) in list"
                    :key="data.id"
                  >
                    <cube-swipe-item
                      ref="swipeItem"
                      :btns="data.btns"
                      :index="index"
                      :class="{ 'swiper-no-swiping': false }"
                      @btn-click="edit"
                    >
                      <div>
                        <li class="flex-justify-start">
                          <div class="people-lists-touxiang"></div>
                          <p>{{ data.userName }}</p>
                        </li>
                      </div>
                    </cube-swipe-item>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="swipeData.length===0">
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="swipeData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";

export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      signSatus: "1",
      list: [],
      infinite: true,
      pageIndex: 0,
      partyMeetingId: "",
    };
  },
  created() {
    this.signSatus = this.$route.params.signSatus + "";
    this.partyMeetingId = this.$route.params.meetingId;
    this.loadData();
  },
  methods: {
    formateTimeStr(str) {
      moment.lang("zh-cn");
      return moment(str).format("MM-DD  hh:mm");
    },
    formateTime(str) {
      moment.lang("zh-cn");
      return moment(str).format("MM月DD日, a hh:mm");
    },
    edit(data) {},
    detail(data) {},
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    loadData() {
      try {
        let data = {
          pageIndex: this.pageIndex + "",
          pageSize: "10",
          partyMeetingId: this.partyMeetingId,
          signSatus: "",
        };
        if (this.signSatus === "1") {
          // 签到人员
          data.signSatus = "1";
        } else {
          // 缺席人员
          data.signSatus = "0";
        }
        loginService
          .getPartyMemberListByStatusAndMeetingIdPage(data)
          .then((res) => {
            if (res.code !== 200) {
              return tools.tip(
                res.describe === "未查询到资源" ? "已无更多数据" : res.describe
              );
            }
            if (res.code === 200 && res.data.length < 1) {
              this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
              return tools.tip("已无更多数据");
            }
            this.pageIndex++;
            this.list = this.list.concat(res.data);
            setTimeout(() => {
              this.$refs.scroll.forceUpdate &&
                this.$refs.scroll.forceUpdate(true, false);
              this.options.isPullUpLoad = false;
            }, 100);
          });
      } catch (e) {
        this.list = [];
      }
    },
  },
};
</script>
